<template>
  <!-- #ifdef H5 -->
    <mtitles  title="我的" bgColor="#56BF7A" :delta='3' color="#fff" isBack></mtitles>
    <!-- #endif -->
	<view class="contain">
		<!-- 关闭免密支付-弹窗 -->
		<!-- <compop ref="pop_close" type="bottom">
			<view class="comViewModal text-left" @touchmove.stop.prevent="">
				<view class="pad_b48">
					<view class="text-center padding-top tanhaoIco text-c9"><text class="acon-a-tishi1"></text></view>
					<view class="padding-top">关闭免密支付，以下功能将失效：</view>
					<view class="padding-top-sm text-c9">单笔订单金额≤1000元，选择电子卡免密/微信免密支 付，无需输入密码，即可快速完成支付，单日最多可用 5次。</view>
					<view class="pc_dis">以下账户将被关闭免密支付功能：</view>
					<view class="padding-top-sm text-c9">账户：135****6984</view>
				</view>
				<view class="dbtnBox padding-top">
					<view class="flex justify-between pad_b48">
						<view class="bckbtn dbcbtn">取消</view>
						<view class="surbtn dbcbtn">确认关闭</view>
					</view>
				</view>
			</view>
		</compop> -->
		<view class="headSec bg-green padding-lr p_rlt cf">
			<view class="margin-top-lg flex">
				<view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
				<view class="hname text-white">
					<view class="text-lg">周杰伦</view>
					<view class=""><view class="htips d_ib text-xs">VIP会员</view></view>
				</view>
			</view>
			<view class="cardDetail">
				<view class="padding-lr cdtopbox">
					<view class="text-sm padding-top-sm" @click="taptVipPage">会员卡余额（元）</view>
					<view class="padding-bottom-sm flex align-center margin-top-xs">
						<view class="flex-sub text-cuts totNums text-bold" @click="taptVipPage">2605</view>
						<view  @click="mnavTo('/pages/others/rechargeCard/rechargeCard')">
							我要充值
							<text class="cuIcon-right"></text>
						</view>
					</view>
				</view>
				<view class="cqbox flex align-center intlh">
					<view class="flex-sub flex justify-center" @click.stop="mnavTo('/pages/user/cardHolder/cardHolder')">
						<view class="lfbox text-acenter text-lg">
							<text class="acon-ka text-white"></text>
						</view>
						<view class="text-c3 padding-left-sm">
							<view class="">
								<text class="text-xll">2</text>
								<text class="text-xs text-c9">张</text>
							</view>
							<view class="text-sm padding-top-xs">
								电子卡包
							</view>
						</view>
					</view>
					<view class="flex-sub p_rlt lfsld flex justify-center" @click.stop="mnavTo('/pages/user/coupon/coupon')">
						<view class="lfbox rd text-acenter text-lg">
							<text class="text-white acon-youhuiquan1"></text>
						</view>
						<view class="text-c3 padding-left-sm">
							<view class="">
								<text class="text-xll">3</text>
								<text class="text-xs text-c9">张</text>
							</view>
							<view class="text-sm padding-top-xs">
								优惠券
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="cu-list grid col-5 no-border text-c9">
					<view class="cu-item" v-for="(item, index) in cuList" :key="index" @click.stop="navigateTo(item.url)">
						<view>
							<view class="text-c3 d_in text-bold text-lg">{{ item.num }}</view>
							<view class="text-xxs d_in margin-left-xxs">张</view>
						</view>
						<view class="text-sm text">{{ item.name }}</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="centSec">
			<view hover-class="none" class="nav-coupon flex justify-center">
				<view class="adv_section padding-bottom-xs"><tb-advSwiper :list="advList" :height="232" :radius="0"></tb-advSwiper></view>
			</view>
			<view class="mordbox bg-white padding-tb-xs">
				<view class="text-bold padding-left">我的订单</view>
				<view class="cu-list grid col-3 no-border text-c9">
					<view class="cu-item" v-for="(item, index) in odList" :key="index">
						<view><image class="cuimg" :src="item.src" mode="aspectFill"></image></view>
						<view class="text-sm margin-top-sm">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="botSec">
			<view class="text-bold padding-left padding-top">
				其他功能
			</view>
			<view class="cu-list grid col-4 no-border text-c9s">
				<view class="cu-item" v-for="(item, index) in mList" :key="index" @click.stop="mnavTo(item.url)">
					<!-- <view><image class="cuimg" :src="item.src" mode="aspectFill"></image></view> -->
					<view><text class="itmIco" :class="'acon-a-carlis'+index"></text></view>
					<view class="padding-top-xs text-sm  margin-top-sm">{{ item.name }}</view>
				</view>
			</view>
			<!-- <view class="flex align-center bsItem text-c9 solid-top solid-bottom">
				<view class="flex-sub">
					<view class="d_ib blico bl text-white margin-right-sm text-center"><text class="acon-fukuan"></text></view>
					<text class="text-c6">免密支付</text>
					<text class="cuIcon-info text-sm"></text>
				</view>
				<view class="text-c9">
					去开通
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="flex align-center bsItem text-c9 solid-bottom" @click="navigateTo('/user/resetPassword/resetPassword')">
				<view class="flex-sub">
					<view class="d_ib blico gr text-white margin-right-sm text-center"><text class="acon-fukuan"></text></view>
					<text class="text-c6">密码修改</text>
				</view>
				<view class="text-c9">
					已设置去修改
					<text class="cuIcon-right"></text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onShow } from '@dcloudio/uni-app';
	import { mnavTo } from '@/utils/helper';
	const cuList=ref([
		{
			name: '优惠券',
			url: '/pages/user/coupon/coupon',
			num: 0
		},
		{
			name: '套餐卡',
			url: '/pages/user/mealCard/mealCard',
			num: 0
		},
		{
			name: '健康卡',
			url: '/pages/user/healthCard/healthCard',
			num: 0
		},
		{
			name: '尊享卡',
			url: '',
			num: 0
		},
		{
			name: '新店卡',
			url: '/pages/user/newStoreCard/newStoreCard',
			num: 0
		}
	]) 
	const advList=ref([
		{
			src:'subscribe/images/bannerm01.png',
			// src: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
			url: ''
		}
	])
	const odList=ref([
		{
			name: '全部',
			src: '../../../static/od_ico0.png',
			id: 0
		},
		{
			name: '待消费',
			src: '../../../static/od_ico1.png',
			id: 1
		},
		{
			name: '已完成',
			src: '../../../static/od_ico2.png',
			id: 3
		}
	])
const	mList=ref([
		{
			id:'0',
			name:'立即绑卡',
			url:''
		},
		{
			id:'1',
			name:'绑套餐卡',
			url:''
		},
		{
			id:'0',
			url: '/pages/user/unbindCard/unbindCard',
			name:'解除绑定',
		},
		{
			id:'0',
			name:'好友充值',
			url:''
		},
		{
			id:'0',
			name:'修改资料',
			url:''
		},
		{
			id:'0',
			name:'变更手机',
			url:''
		},
		{
			id:'0',
			name:'变更密码',
			url:''
		},
		{
			id:'0',
			name:'关于我们',
			url:''
		}
	])
  const taptVipPage=()=> {
		mnavTo('/pages/user/vipCardDetail/vipCardDetail')
		}
</script>

<style lang="scss">
	.headSec {
		height: 320rpx;
		.htips {
			padding: 0 12rpx;
			height: 36rpx;
			line-height: 35rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 4rpx 20rpx;
			margin-top: 4rpx;
		}
	}
	.hname {
		padding-left: 70rpx;
	}
	.cdtopbox{
		height: 160rpx;
		color: #874F05;
		border-radius: 16rpx 16rpx 0 0;
		box-shadow: 0px 2px 18rpx 0px rgba(0, 0, 0, 0.08);
		background: linear-gradient(90deg, #FFE3BC 0%, #FDC98D 100%);
	}
	.cqbox{
		height: 160rpx;
		.lfbox{
			width: 82rpx;
			height: 82rpx;
			border-radius: 20rpx;
			background: linear-gradient(139deg, #64F0A6 0%, #1ACF72 100%);
			&.rd{
				background: linear-gradient(139deg, #F9BFA5 0%, #F0786F 100%);
			}
		}
		.lfsld:before{
			content: '';
			width: 1px;
			height: 50rpx;
			background: rgba(0, 0, 0, 0.05);
			position: absolute;
			left: 0;
			top: 18rpx;
		}
	}
	.cardDetail {
		position: absolute;
		width: calc(100vw - 60rpx);
		left: 30rpx;
		bottom: -180rpx;
		height: 320rpx;
		background: #ffffff;
		box-shadow: 0px 4rpx 18rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
	}
	.totNums {
		font-size: 60rpx;
	}
	.cu-list.grid {
		line-height: 1;
		padding: 20rpx 10rpx 0 10rpx !important;
		background: none !important;
	}
	.centSec {
		padding: 198rpx 30rpx 0 30rpx;
		.cuimg {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.adv_section {
		width: 100%;
	}
	.mordbox{
		width: 100%;
		min-height: 220rpx;
		border-radius: 16rpx;
		background: #FFF;
		box-shadow: 0px 2px 18rpx 0px rgba(0, 0, 0, 0.08);
	}
	
	.botSec {
		// padding: 0 40rpx;
		.itmIco{
			font-size: 60rpx!important;
			color: #56BF7A!important;
		}
		.bsItem {
			width: 100%;
			height: 120rpx;
		}
		.blico {
			width: 52rpx;
			height: 52rpx;
			line-height: 53rpx;
			border-radius: 50%;
			border: 2rpx solid rgba(110, 177, 251, 0.3);
			&.bl {
				background: #6eb1fb;
			}
			&.gr {
				background: #56bf7a;
			}
		}
	}
	.dbtnBox {
		font-size: 28rpx;
		background: #fff;
		// position: absolute;
		width: 100%;
		// height: 144rpx;
		// left: 0;
		// bottom: 0;
		padding-bottom: 40rpx;
		.bckbtn {
			@include baseTag(310rpx, 100rpx);
			color: #56bf7a;
			border: 1px solid #56bf7a;
			border-radius: 100rpx;
		}
		.surbtn {
			@include baseTag(316rpx, 100rpx);
			background: #56bf7a;
			color: #fff;
			border-radius: 100rpx;
		}
	}
	
	.tanhaoIco {
		font-size: 80rpx;
	}
	.comViewModal {
		padding: 0;
		.pc_dis {
			padding-top: 68rpx;
		}
	}
</style>
